<template>
    <div class="price-wrapper" v-if="!priceDetail">
      <div class="price-item">
        <div class="item-left">{{ allPriceText }}</div>
        <div class="item-right" v-if="!isIntegral">{{ priceInfo.front_end_goods_price | centToYuan() }}</div>
        <div class="item-right" v-if="isIntegral">{{ integralPrice + t('payDetail_points') }}</div>
      </div>
      <div class="price-item" v-if="showFreight">
        <div class="item-left">{{t('payDetail_freight')}}</div>
        <div class="item-right">{{ priceInfo.actual_shipment_fee | centToYuan() }}</div>
      </div>
      <div class="price-item" v-if="showDiscountPrice && !this.isIntegral">
        <div class="item-left">
          {{t('payDetail_count')}}
          <i v-if="priceInfo.floor_fix_price"
             @click="showTips = true"
             class="iconfont icon-rule_icon tips-icon"></i>
        </div>
        <div class="item-right">{{ this.priceInfo.front_end_discount_price | centToYuan(1) | symbolFilter }}</div>
      </div>
      <div class="price-item" v-if="priceInfo.floor_fix_price && !this.isIntegral">
        <div class="item-left">{{ t('payDetail_floor_price') }}</div>
        <div class="item-right">{{ priceInfo.floor_fix_price | centToYuan(1) }}</div>
      </div>
      <van-popup v-model="showTips" position="bottom" :overlay="true">
        <div class="tips-content">
          <div class="title">
            {{t('payDetail_tips_title')}}
            <div class="icon" @click="showTips = false">
              <i class="van-icon van-icon-cross"></i>
            </div>
          </div>
          <div class="content">
            <p>{{t('payDetail_tips_content_one')}}</p>
            <p>{{t('payDetail_tips_content_two')}}</p>
          </div>
        </div>
      </van-popup>
    </div>
  </template>

  <script>
  import { ENTITY_GOODS } from "../../utils/constants";
  import locale from "../../../../mixins/locale";

  export default {
    name: 'H5GoodsFeIndex',
    mixins: [locale],
    props: {
      valuateData: {
        type: Object,
        default: () => ({})
      },
      isCart: {
        type: Boolean,
        default: false
      },
      cartGoodsList: {
        type: Array,
        default: () => ([])
      },
      goodsInfo: {
        type: Object,
        default: () => ({})
      },
      activeMode: {
        type: Number || String,
        default: 0
      },
      distributionMode: {
        type: Number || String,
        default: 0
      },
      isIntegral: {
        type: Boolean,
        default: false
      },
      baseInfo: {
        type: Object,
        default: () => ({})
      },
      count: {
        type: Number || String,
        default: 1
      }
    },
    data() {
      return {
        showTips: false
      };
    },
    mounted() {

    },
    filters: {
      symbolFilter(value) {
        return "- " + value;
      },
      // 分转换为元
      centToYuan(num) {
        return `¥${(num / 100).toFixed(2)}`;
      }
    },
    computed: {
      priceInfo() {
        return this.valuateData?.price_info || {};
      },
      priceDetail() {
        return this.priceInfo?.original_shipment_fee <= 0 && this.priceInfo?.front_end_discount_price <= 0
      },
      showFreight() {
        return !!this.priceInfo.actual_shipment_fee
      },
      showDiscountPrice() {
        return !!this.priceInfo?.front_end_discount_price && this.baseInfo.renew !== '1'
      },
      goodsCount() {
        return this.cartGoodsList.reduce((count, goodsInfo) => {
          return count + goodsInfo.count;
        }, 0)
      },
      allPriceText() {
        return this.isCart ? `${this.t('payDetail_subtotal')}${this.goodsCount}${this.t('payDetail_item')}` :  this.t('payDetail_payment')
      },
      integralPrice() {
        return Number(this.baseInfo.pointsNum) * Number(this.count)
      },
    },
  };
  </script>

  <style lang="scss" scoped>
  .price-wrapper {
    padding: 0 .3rem;
    background: #fff;
    box-sizing: border-box;

    .price-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      //padding: .14rem .3rem;
      padding: 0.26rem 0;
      border-bottom: 0.01rem solid #eee;
      font-size: .28rem;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .icon-rule_icon {
    color: #999;
    font-size: .28rem;
  }

  ::v-deep .van-popup {
    border-radius: .28rem .28rem 0 0;
  }

  .tips-content {
    box-sizing: border-box;
    padding: .12rem .32rem 1rem;

    .title {
      font-size: .36rem;
      color: #333;
      font-weight: 500;
      width: 100%;
      text-align: center;
      height: .96rem;
      align-items: center;
      position: relative;
      background-color: #fff;
      border-radius: .32rem;

      .icon {
        position: absolute;
        right: -0.12rem;
        top: .06rem;
      }
    }
  }
  </style>
